<template>
  <div class="order">
    <van-nav-bar title="当前订单" left-text="返回" left-arrow @click-left="() => $router.go(-1)" />
    <!-- 地址 -->
    <div class="card address" @click="show = true">
      <van-icon name="location" size="35px" color="#FF8000" />
      <div>
        <p style="font-weight: bold">浙江财经大学东方学院{{ userAddress[this.addressID].address }}</p>
        <p>{{ userAddress[this.addressID].name }} {{ userAddress[this.addressID].phone }}</p>
      </div>
    </div>
    <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect">

    </van-action-sheet>

    <!-- 商品 -->
    <momentStrip v-for="(item, index) in goods" :key="index" :pieceData="item" :showOpera="false" />

    <!-- bar -->
    <div>
      <van-submit-bar :price="getTotal" button-text="提交订单" @submit="onSubmit">
        <span>共计{{ num }}件</span>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import momentStrip from "@/components/momentStrip";
import { SubmitBar, ActionSheet, Toast } from "vant";
import { mapState, mapActions } from "vuex";
export default {
  components: {
    momentStrip,
    [SubmitBar.name]: SubmitBar,
    [ActionSheet.name]: ActionSheet,

  },
  data() {
    return {
      goods: [],
      goodsId: [],
      total: 0,
      num: 0,
      isbuy: false,
      show: false,
      actions: [],
      addressID: 0
    };
  },
  computed: {
    ...mapState(["order", "userAddress"]),
    getTotal() {
      this.goods.forEach((item) => {
        this.total += item.price;
        this.num += 1;
      });
      return this.total * 100;
    },
  },
  methods: {
    ...mapActions(["getUserAddress"]),
    onSelect(item, index) {
      this.show = false
      this.addressID = index
    },
    onSubmit() {
      let succNum = 0;
      this.order.forEach((item, index) => {
        this.$axios
          .post("/saveOrder", {
            sellerID: this.goods[index].userID,
            momentID: item,
            addressID: this.userAddress[this.addressID].addressID,
            buyerID: localStorage.getItem("userID"),
          })
          .then((res) => {
            if (res.code === 200) {
              succNum += 1;
              if (succNum === this.order.length) {
                this.isbuy = true
                this.$axios.post('/deleteGoods', { myid: parseInt(localStorage.getItem("userID")), goods: this.goodsId })
                this.$router.replace("/myOrder");
              }
            }
          });
      });
    },
  },

  created() {
    this.goods = this.$route.params.orderD
    this.goods.forEach(item => {
      this.goodsId.push(item.momentID)
    })
    this.getUserAddress({ userID: localStorage.getItem("userID") });
    this.userAddress.forEach(item => {
      this.actions.push({ 'name': item.name + " | " + item.address + " | " + item.phone })
    })
  },
  destroyed() {
    if (this.isbuy === false) {
      this.$axios.post("/unlockMoment", { momentID: this.order });
    }
  },
};
</script>

<style scoped>
.order>div {
  border-radius: 5px;
  background-color: #fff;
}

.card {
  width: 90vw;
  padding: 5px;
  text-align: left;
  margin: 0 auto;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.address {
  display: flex;
  align-items: center;
}

.address p {
  font-size: 16px;
  margin: 5px;
}
</style>